$gutter: 20px;

$color-dashboard-text-light-grey: #aaa;
$color-dashboard-light-border: #e5e5e5;
$color-dashboard-light-grey-bg: #fafafa;


%box-style {
	background: $white;
	border: 1px solid $color-dashboard-light-border;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}

%box-style-link-hover {
	display: block;
	text-decoration: none;

	&:hover {
		background: $color-dashboard-light-grey-bg;
	}
}


.automatewoo-page--dashboard {
	overflow: hidden;
}

.automatewoo-dashboard {

	&-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	// DATE RANGE
	&-date-nav__tab {
		position: relative;
		line-height: 1;

		&::after {
			content: "";
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 0;
			background-color: var(--wp-admin-theme-color);
		}

		&--current::after {
			height: var(--wp-admin-border-width-focus);
		}
	}

	&-widgets {
		margin-top: 20px;
		margin-right: -$gutter;
	}

	&-widget-sizer {
		width: calc(100% - #{$gutter});

		@media ( min-width: 800px ) {
			width: calc(50% - #{$gutter});
		}

		@media ( min-width: 1200px ) {
			width: calc(33.33% - #{$gutter});
		}

		@media ( min-width: 1750px ) {
			width: calc(25% - #{$gutter});
		}
	}

	// WIDGETS

	&-widget {
		margin-bottom: $gutter;
		width: calc(100% - #{$gutter});

		@media ( min-width: 800px ) {
			width: calc(50% - #{$gutter});
		}

		@media ( min-width: 1200px ) {
			width: calc(33.33% - #{$gutter});
		}

		@media ( min-width: 1750px ) {
			width: calc(25% - #{$gutter});
		}
	}

	&-widget__content {

	}


	// KEY FIGURES

	&-widget--key-figures {
		margin-bottom: 0;
	}

	&__figures {

		@include clearfix;
		margin: 0 calc(-1 * $gutter / 2);
	}

	&__figure {

		@extend %box-style;
		@extend %box-style-link-hover;
		display: block;
		margin: 0 calc($gutter / 2) $gutter;
		float: left;
		width: calc(50% - #{$gutter});
		text-align: center;
		background-color: #fff;
		box-sizing: border-box;
		padding: 17px 10px 21px;
	}

	&__figure-name {
		color: $color-dashboard-text-light-grey;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		font-size: 12.5px;
	}

	&__figure-value {
		color: $color-dark-grey;
		font-size: 21px;
		font-weight: 300;
		line-height: 1.3;
	}


	// FEATURED WORKFLOWS

	&__workflows {

		@extend %box-style;
	}

	&__workflow {

		@extend %box-style-link-hover;
		padding: 17px 17px;

		&:not(:last-child) {
			border-bottom: 1px solid $color-dashboard-light-border;
		}
	}

	&__workflow-title {
		font-size: 17px;
		text-decoration: none;
	}

	&__workflow-description {
		color: $color-dashboard-text-light-grey;
	}


	// CHARTS

	&-chart {

		@extend %box-style;
		display: block;
		position: relative;

		&[aw-loading] .aw-loader {
			opacity: 0.4;
		}
	}

	&-chart__flot {
		display: block;
		height: 150px;
		margin: 12px 14px 20px;

		@media ( min-width: 800px ) {
			height: 190px;
		}

		@media ( min-width: 1200px ) {
			height: 200px;
		}

		@media ( min-width: 1400px ) {
			height: 220px;
		}


		.flot-x-axis > div {
			margin-top: 11px;
		}
	}

	&-chart__tooltip {
		z-index: 10;
		position: absolute;
		display: none;
		background: $black;
		opacity: 0.75;
		color: $white;
		padding: 3px 5px 4px;
		font-weight: 500;
		border-radius: 3px;
		font-size: 11px;
		line-height: 1;
	}

	&-chart__header {
		border-bottom: 1px solid $grey-very-light-border;
		position: relative;
		height: 73px;

		@include clearfix;
		overflow: hidden;
	}

	&-chart__header-group {
		padding: 16px 20px;
		float: left;

		&:not(:first-child) {
			border-left: 1px solid $grey-very-light-border;
		}
	}

	&-chart__header .automatewoo-arrow-link {
		position: absolute;
		right: 20px;
		top: 28px;
	}

	&-chart__header-figure {
		color: $color-dark-grey;
		font-size: 21px;
		font-weight: 300;
		line-height: 1.1;
	}

	&-chart__header-text {
		color: $color-dashboard-text-light-grey;
		font-size: 12.5px;
	}

	&-chart__legend {
		display: inline-block;
		width: 4px;
		height: 4px;
		border: 2px solid $grey-light-border;
		margin-right: 1px;
		border-radius: 50%;
	}

	&-chart__legend--blue {
		border-color: #3498db;
	}

	&-chart__legend--purple {
		border-color: #d0a0e4;
	}

	&-chart__legend--green {
		border-color: #72c9b2;
	}


	// LIST TABLE

	&-list {

		@extend %box-style;
	}

	&-list__header {
		border-bottom: 1px solid $grey-very-light-border;
		padding: 22px 20px;
	}

	&-list__header .automatewoo-arrow-link {
		position: absolute;
		right: 20px;
		top: 22px;
	}

	&-list__heading {
		font-weight: 500;
		color: $color-dark-grey;
		font-size: 14px;
	}

	&-list__items {}

	&-list__item {
		padding: 12px 20px;
		background: #f9f9f9;

		&:not(:last-child) {
			border-bottom: 1px solid $grey-very-light-border;
		}
	}

	&-list__item-title {
		text-decoration: none;
		font-weight: 500;
	}

	&-list__item-text {
		font-size: 12.5px;
		color: $color-dashboard-text-light-grey;
	}

	&-list__item-button {
		float: right;
	}

	&-list__empty {
		text-align: center;
		background: #f9f9f9;
		padding: 60px 20px;
		color: $color-dashboard-text-light-grey;

	}

}
